<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>添加服务页面</title>
  <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body>
<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">服务项目</label>
    <div class="layui-input-inline">
      <input type="text" name="itemName" required  lay-verify="required" placeholder="请输入服务项目" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">输入价格</label>
    <div class="layui-input-inline">
      <input type="text" name="itemPrice" required lay-verify="required" placeholder="请输入服务价格" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">服务类别</label>
    <div class="layui-input-inline">
      <select name="itemType" lay-verify="required">
        <option value=""></option>
        <option value="美甲">美甲</option>
        <option value="美容">美容</option>
        <option value="美发">美发</option>
        <option value="修脚">推荐</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">选择店铺</label>
    <div class="layui-input-inline">
      <select id="store-box" name="storeId" lay-verify="required">
        <option value=""></option>
      </select>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">项目图片</label>
    <div class="layui-input-block">
      <!-- 上传图片预览 -->
      <img id="preView"  width="200" height="120px">
      <button type="button" class="layui-btn" id="upload_btn">
        <i class="layui-icon">&#xe67c;</i>上传图片
      </button>
      <input id="img_url" name="itemUrl" type="hidden">
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">详情描述</label>
    <div class="layui-input-block">
      <textarea name="itemDescription" placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">服务状态</label>
    <div class="layui-input-block">
      <input  type="checkbox" name="itemStatus" value="1" lay-skin="switch">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="addForm">提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
<script th:src="@{/layui/layui.js}"></script>
<script>
  layui.form.on('submit(addForm)', function(data){
    //发送给后台，后台接受这些数据保存到数据库中
    var $ =  layui.jquery;
    $.ajax({
      method:'post',          /*请求方式 post（安全 数据量大）  get*/
      url:'/item/add.do',  /*谁来接受数据，也就是后台地址*/
      data: JSON.stringify(data.field), /* 发个后台的数据 */
      dataType:'text',        /*希望后台给咱们的数据格式*/
      contentType:'application/json', /*声明发送给后台的数据格式*/
      success:function (rs){
        layui.layer.msg('添加成功');
      }
    })
    return false;
  });

  var $ =  layui.jquery;
  $.ajax({
    method:'get',          /*请求方式 post（安全 数据量大）  get*/
    url:'/store/list.do',  /*谁来接受数据，也就是后台地址*/
    dataType:'json',        /*希望后台给咱们的数据格式*/
    contentType:'application/json', /*声明发送给后台的数据格式*/
    success:function (rs){
      var $store = $("#store-box");
      for (var i=0; i<rs.length;i++){
        $store.append("<option value='"+rs[i].storeId+"'>"+rs[i].storeName+"</option>")
      }
      layui.form.render("select")
    }
  });

  /*点击上传按钮发送请求*/
  //执行实例
  var uploadInst = layui.upload.render({
    elem: '#upload_btn' //绑定元素
    ,url: '/upload/upload.do' //上传接口
    ,done: function(res){
      //上传完毕回调，把上传成功的图片地址给到 img标签的src
      $("#preView").attr('src',res.data);
      $("#img_url").val(res.data);
    }
    ,error: function(){
      //请求异常回调
    }
  });
</script>
</body>
</html>
